<!-- 老年大学购买学员资格 -->
<template>
	<view class="buy-container">
		<view class="header">
			<view class="info" v-if="list.length > 0">需支付</view>
			<view class="true-price" v-if="list.length > 0">{{list[currentIndex].truePrice}}</view>
			<view class="display-price" v-if="list.length > 0">原价{{list[currentIndex].displayPrice}}元</view>
		</view>
		<view class="tabs-content">
			<view class="tabs" @tap="handleTab">
				<view 
				class="tab-item" 
				v-for="(item, index) in list" 
				:key="index" 
				:class="{'selected': currentIndex == index}" 
				:data-index="index">
					{{item.goodsName}}
				</view>
				<view class="border-line" :style="{'left': `${currentIndex == 0?0:(100/list.length)}%`}"></view>
			</view>
		</view>
		 <swiper 
		 class="swiper" 
		 :current="currentIndex" 
		 :indicator-dots="false" 
		 :circular="false" 
		 :autoplay="false" 
		 :duration="500" 
		 @change="handleChange">
		    <swiper-item v-for="(item, index) in list" :key="index" :current="index">
		        <view class="swiper-item">
					<view class="card">
						<view class="name">{{item.goodsName}}</view>
						<view class="desc">
							<text>
								{{item.goodsRemark}}
							</text>
						</view>
						<view class="footer">
							<view class="pay-btn" @tap="handlePay(item)">支付</view>
						</view>
					</view>
				</view>
		    </swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { pay } from '@/common/pay.js';
	export default{
		name: 'buy',
		data(){
			return{
				clientUserId: '',
				tenantId: '',
				// tabs用
				currentIndex: 0,
				// 商品列表
				list: []
			}
		},
		onLoad(e){
			if(e.clientUserId){
				this.clientUserId = e.clientUserId;
			}
			if(e.tenantId){
				this.tenantId = e.tenantId;
			}
			this.$http.request({
				url: '/api/Goods/GetSchoolVips',
				data: {
					clientUserId: this.clientUserId
				}
			}).then(resp=>{
				this.list = resp.goodsList;
			})
		},
		methods:{
			// 滑块切换
			handleChange(e){
				this.currentIndex = e.detail.current;
			},
			// 切换tab栏
			handleTab(e){
				let current = e.target.dataset.index;
				if(current == 0 || current == 1){
					this.currentIndex = current;
				}
			},
			// 支付
			handlePay(e){
				pay(
				{ 
					clientUserId: this.clientUserId,
					tenantId: this.tenantId,
					orderOrigin: 1,
					orderItems: [
						{ 
							goodsId: e.goodsId, 
							count: 1, 
							canGift: false
						}
					]
				},
				function() {
					wx.navigateBackMiniProgram();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-container{
		min-height: 100vh;
	}
	.header{
		width: 200%;
		height: 25vh;
		background-image: linear-gradient(60deg, #37a7db, #007aff);
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
		position: relative;
		left: -50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.info{
			color: #fff;
			font-size: 30rpx;
		}
		.true-price{
			color: #fff;
			font-size: 80rpx;
			font-weight: 500;
		}
		.true-price::before{
			content: "¥";
		}
		.display-price{
			color: #fff;
			font-size: 30rpx;
			position: relative;
		}
		.display-price::before{
			content: "";
			width: 110%;
			height: 3rpx;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: -5%;
			transform: rotate(15deg);
		}
	}
	.tabs-content{
		width: 100%;
		height: 8vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.tabs{
			width: 80%;
			display: flex;
			justify-content: space-around;
			font-size: 40rpx;
			padding: 20rpx;
			border-bottom: 1rpx solid #999;
			position: relative;
			.tab-item{
				padding: 0 20rpx;
				&.selected{
					color: #1296db;
				}
			}
			.border-line{
				width: 50%;
				height: 8rpx;
				background-color: #1296db;
				position: absolute;
				left: 0;
				bottom: -4rpx;
				border-radius: 10rpx;
				transition: left linear .3s;
			}
		}
	}
	.swiper{
		width: 100%;
		min-height: 67vh;
		.swiper-item{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.card{
				width: 90%;
				min-height: 95%;
				background-color: #fff;
				box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				position: relative;
				.name{
					font-size: 50rpx;
					text-align: center;
				}
				.desc{
					font-size: 40rpx;
					margin-top: 30rpx;
				}
				.footer{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 20rpx;
					left: 0;
					right: 0;
					.pay-btn{
						width: 90%;
						height: 100rpx;
						background-image: linear-gradient(45deg, #37a7db, #007aff);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
						color: #fff;
						font-size: 40rpx;
						letter-spacing: 5rpx;
						transition: opacity .3s;
					}
					.pay-btn:active{
						opacity: .8;
					}
				}
			}
		}
	}
	
</style>
